<!--酒店类型-->
<template>
    <div>
        <div class="" style="position: relative;left: 2px">
            <!-- 标签列表 -->
            <div class="h-tab">
                <ul class="ul-tab">
                    <li v-for="item in information.tab" :key="item.id">
                        <a href="#" class="select" @click="tabon($event)">
                            {{item.tabtitle}}
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 筛选 -->
            <div class="hotel-toolbar clearfix">
                <div class="htb-item htb-item-price">
                    <div class="htb-title text-left">
                        <span>¥{{ this.value[0] }}-{{ this.value[1] }}</span>
                        价格
                    </div>
                    <!-- silder滑块 -->
                    <div class="price-range">
                        <el-slider v-model="value" range show-stops :max="4000" @change="priceStr"></el-slider>
                    </div>
                </div>
                <!-- 住宿等级\类型\设施\品牌-->
                <div class="htb-item htb-item-dropdown"
                     v-for="ititem in list"
                     :key="ititem.id">
                    <div class="htb-title text-left">{{ ititem.title }}</div>
                    <div class="htb-select open text-left _j_dropdown_filter_trigger">
                        <div class="sel-trigger ">
                            <i class="i-sel-arrow"></i>
                            <span>不限</span>
                        </div>
                        <div class="sel-dropdown _j_dropdown_filter_content">
                            <ul></ul>
                            <div class="empty">
                                <a class="btn" href="#">清空</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 指定地点距离 -->
                <div class="htb-item htb-item-dist">
                    <div class="htb-title text-left">与指定地点距离</div>
                    <div class="htb-select">
                        <div class="sel-trigger text-left">
                            <i class="i-sel-arrow"></i>
                            <span class="dist-num ">10公里</span>
                            <span>选择地点</span>
                        </div>
                    </div>
                </div>

            </div>
            <!-- -*- -->
            <div class="hotel-sortbar clearfix">
                <div class="sortbar-info">
                    <div class="total">
                        <span>{{ information.num }}</span>家酒店
                    </div>

                    <div class="checkbox-list clearfix">
                        <a href="#" class="mui-checkbox" @click.prevent="pitch($event)">
                            <i class="icon-checkbox"></i>
                            临地铁
                        </a>
                        <a href="#" class="mui-checkbox" @click.prevent="pitch($event)">
                            <i class="icon-checkbox"></i>
                            收藏
                        </a>
                    </div>

                    <div class="htb-search">
                        <div class="htb-searchbar">
                            <input type="text" placeholder="搜索关键词" />
                            <a class="htb-icon-search" href="#"></a>
                        </div>
                    </div>
                </div>
                <!-- -*- -->
                <div class="sortbar-nav">
                    <a href="#" class="on">综合排序</a>
                    <a href="#">销量</a>
                    <a class="price-sort" href="#" @click="psort"><i></i>
                        价格
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ["information"],
        data() {
            return {
                value: [0, 4000],
                list: [
                    { title: "住宿等级" },
                    { title: "住宿类型" },
                    { title: "设施" },
                    { title: "品牌" }
                ]
            };
        },
        mounted() {
            let litab = document.getElementsByClassName("select");
            // 确定该a标签的节点
            // console.log(select);
            litab[0].className = "on select";
        },
        methods: {
            tabon(e) {
                let litab = document.getElementsByClassName("select");
                console.log(litab);
                //   鼠标点击的该元素（当前点击的元素）
                //   console.log(e.target);
                for (var i = 0; i < litab.length; i++) {
                    litab[i].className = "select";
                }
                e.target.className = " on select";
            },
            /*点击复选框*/
            pitch(ee) {
                let check = document.getElementsByClassName("mui-checkbox");
                console.log(check);
                console.log(ee);
                if (ee.target.className == "mui-checkbox") {
                    ee.target.className = "mui-checkbox on";
                } else if (ee.target.className == "mui-checkbox on") {
                    ee.target.className = "mui-checkbox";
                }
            },priceStr(){
                this.$emit("priceStr",this.value);
            },psort(){
                this.$emit("psort");
            }
        }
    };
</script>

<style scoped>
    .text-left{
        text-align: left;
    }

    .price-range >>> .el-slider__button{
        border: 1px solid #ffb200;
        width: 45%;
        height: 45%;
        margin-top: -4px;
    }

    .price-range >>> .el-slider__bar{
        background-color: #ffb200;
        height: 4px;
    }

    .price-range,
    .dist-range-box {
        margin: -10px 10px 0;
    }
</style>
